/*
 * @Author: cyxxyz 202100150029@mail.sdu.edu.cn
 * @Date: 2023-03-12 23:09:05
 * @LastEditors: cyxxyz 202100150029@mail.sdu.edu.cn
 * @LastEditTime: 2023-04-22 00:03:21
 * @FilePath: \web-frontend\src\pages\base\contact\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useState } from 'react';
//import  {API}  from '@/services/api/typings';
import { statistics } from '@/services/api/instrument';

import { Column } from '@ant-design/plots';
import { PageContainer} from '@ant-design/pro-components';


export default ()=> {
  const[newstatistics,setNewStatistics]= useState<API.InstrumentStatisticsVO>();  

  const getNewStatistics =async()=>{
    const result = await statistics();
    setNewStatistics(result);
  }

  useEffect(() => {
    getNewStatistics();
  }, []);


  function transfer(list0: API.StatisticsInstrumentStatisticsVO | undefined) {
    let list1: {borrowedBy: string, value: number, type:string}[] = [];
    let list2: {borrowedBy: string, value: number, type:string}[] = [];
    if (list0?.list) {
      list1 = list0.list.map(item => ({borrowedBy: item.borrowedBy, value: item.num, type:"领用仪器总数"}));
      list2 = list0.list.map(item => ({borrowedBy: item.borrowedBy, value: item.sum, type:"领用仪器总价格"}));
    } else {
      list1 = [{borrowedBy: '无', value: 0, type:"领用仪器总数"}];
      list2 = [{borrowedBy: '无', value: 0, type:"领用仪器总价格"}];
    }
    return [...list1, ...list2];
  }
  
  const data =transfer(newstatistics);

  const config = {
    data,
    xField: 'borrowedBy',
    yField: 'value',
    seriesField:'type',
    isGroup:true,
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'top', 'middle', 'bottom'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
  };

  
  return (
    <PageContainer>

      <Column {...config} />

    </PageContainer>
  );
}
